<template>
    <div style="height: 100vh; overflow: hidden scroll; padding-bottom: 1.25rem;" class="p2pgoodsstrend">
        <x-header :left-options="{backText: ''}">市场详情</x-header>
        <div class="divtop">
            <p style="text-align:right; padding:0.5rem;">
                <!--        <a href="javascript:void(0)" style="color:#fff; " @click="gop2pbillingdetails">库存账单</a>-->
            </p>
            <p style="text-align:center; padding-bottom:1rem; font-size:.4rem;">实时价格</p>
            <p style="text-align:center; font-size:1rem;">{{realtimeprice}}</p>
            <p style="text-align:center; padding:0.3rem; font-size:.34rem;">{{p2pgoodsdata.goods_name}}</p>
            <div style="height: 1.4rem;"></div>
            <div class="bottom-row">
                <div slot="content" class="card-grid-flex">
                    <div class="vux-1px-r">
                        {{lowestprice}}
                        <p>最低(元)</p>
                    </div>
                    <div class="vux-1px-r">
                        {{highestprice}}
                        <p>最高(元)</p>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 1rem;"></div>
        <div class="cargo">
            <!--      <h2 class="cargo_title">市场流通价</h2>-->
            <div class="cargo_box">
                <div class="cargo_h2_box">
                    <h2 class="text-left">排序</h2>
                    <h2>价格</h2>
                    <h2 class="text-right">数量</h2>
                </div>
                <ul>
                    <li v-for="(item, index) in inandoutData" :key="index">
                        <div class="flex text-left">出{{index+1}}</div>
                        <div class="flex orange">{{item.commission_price}}</div>
                        <div class="flex text-right">{{item.commission_num}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="spec" style="padding-bottom: .5rem;">
            <!--      <h2 class="spec_title">选择规格<span>(库存：{{goods_num}})</span></h2>-->
            <div class="spec_box">
                <ul>
                    <li>
                        <span>价格</span>
                        <img src="./image/jian.png" alt="" @click="transactionparice--">
                        <label>
                            <input type="text" v-model="transactionparice">
                        </label>
                        <img src="./image/jia.png" alt="" @click="transactionparice++">
                    </li>
                    <li style="border: none;">
                        <span>数量</span>
                        <img src="./image/jian.png" alt="" @click="transactionnum--">
                        <label>
                            <input type="text" v-model="transactionnum">
                        </label>
                        <img src="./image/jia.png" alt="" @click="transactionnum++">
                    </li>
                </ul>
            </div>
        </div>
        <div class="edit_posi_btn">
            <button class="posi_btn" @click="submitpurchase()">进货</button>
            <button class="posi_btn" @click="outpurchase()">委托出货</button>
        </div>
        <div v-show="false">
            <group>
                <x-number :title="textprice" width="100px" :min="0" :fillable="true" style="color:#333"
                          v-model="transactionparice"></x-number>
            </group>
        </div>
        <div v-show="false">
            <group>
                <x-number :title="textquantity" width="100px" :min="0" :fillable="true" style=" color:#333"
                          v-model="transactionnum"></x-number>
            </group>
        </div>
    </div>
</template>
<script>
import {XHeader, XTable, XNumber, Group, XButton, Flexbox, FlexboxItem} from 'vux'
import {
  getP2PGoodsDetail,
  prescribedtradinghours,
  updatatransactionrecord,
  getcapitalbuy,
  getPriceTrend,
  getRealTimePriceTrend,
  getPriceTrendsize,
  getPriceTrendOut,
  addOutTransactionRecord,
  getP2PUserPositions,
  getTradingPriceFloating
} from '@api'
import {mapState} from 'vuex'

export default {
  components: {
    XHeader,
    XTable,
    XNumber,
    Group,
    XButton,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      textprice: '价格',
      textquantity: '数量',
      highestprice: 0, // 当日交易最高价
      lowestprice: 0, // 当日交易最低价
      realtimeprice: 0, // 当日交易实时价
      inandoutData: [],
      transactionparice: 0, // 交易单价
      transactionnum: 0, // 交易数量
      p2pgoodsdata: [], // 交易商品详情
      openingparice: 0, // 交易当日开盘价
      goods_num: 0,
      upprice: 1, // 交易上浮比例
      downprice: 1 // 交易下调比例
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    gop2pbillingdetails () {
      this.$router.push({
        path: '/p2pbillingdetails',
        query: {
          id: this.p2pgoodsdata.goods_id
        }
      })
    },
    // 委托进货
    async submitpurchase () {
      var that = this
      let form = new FormData()
      form.append('userid', this.user.user_id)
      form.append('goodsid', this.p2pgoodsdata.goods_id)
      let re = await getcapitalbuy(form)
      if (re && re.code === 200) {
        that.$vux.confirm.show({
          title: '退回本金',
          content: '您当前正在参与保本金活动，自由交易将自动结束保本金活动政策！',
          onConfirm: () => {
            that.eepurchase()
          }
        })
      } else {
        let res = await prescribedtradinghours()
        if (res && res.code === 200) {
          if (this.transactionparice === 0) {
            that.$vux.alert.show({
              title: '提示',
              content: '请输入交易价格！'
            })
            return false
          }
          if (this.transactionnum === 0) {
            that.$vux.alert.show({
              title: '提示',
              content: '请输入交易数量！'
            })
            return false
          }
          var A = this.openingparice * this.downprice
          var B = this.openingparice * this.uppric
          if (A > this.transactionparice) {
            that.$vux.alert.show({
              title: '提示',
              content: '您输入的价格超出平均值，受限！'
            })
            return false
          }
          if (B < this.transactionparice) {
            that.$vux.alert.show({
              title: '提示',
              content: '您输入的价格超出平均值，受限！'
            })
            return false
          }
          this.$router.push({
            path: '/p2ppaymentorder',
            query: {
              id: this.p2pgoodsdata.goods_id,
              transactionparice: this.transactionparice,
              transactionnum: this.transactionnum,
              isok: false
            }
          })
        }
      }
    },
    // 进货自动退出保本金活动政策
    async eepurchase () {
      let res = await prescribedtradinghours()
      if (res && res.code === 200) {
        if (this.transactionparice === 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入交易价格！'
          })
          return false
        }
        if (this.transactionnum === 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入交易数量！'
          })
          return false
        }
        var A = this.openingparice * this.downprice
        var B = this.openingparice * this.upprice
        if (A > this.transactionparice) {
          this.$vux.alert.show({
            title: '提示',
            content: '您输入的价格超出平均值，受限！'
          })
          return false
        }
        if (B < this.transactionparice) {
          this.$vux.alert.show({
            title: '提示',
            content: '您输入的价格超出平均值，受限！'
          })
          return false
        }
        this.$router.push({
          path: '/p2ppaymentorder',
          query: {
            id: this.p2pgoodsdata.goods_id,
            transactionparice: this.transactionparice,
            transactionnum: this.transactionnum,
            isok: true
          }
        })
      }
    },
    // 出货退出保本金活动政策
    async purchase () {
      let res = await prescribedtradinghours()
      if (res && res.code === 200) {
        if (this.transactionparice === 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入交易价格！'
          })
          return false
        }
        if (this.transactionnum === 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入交易数量！'
          })
          return false
        }
        var A = this.openingparice * this.downprice
        var B = this.openingparice * this.upprice
        if (A > this.transactionparice) {
          this.$vux.alert.show({
            title: '提示',
            content: '您输入的价格超出平均值，受限！'
          })
          return false
        }
        if (B < this.transactionparice) {
          this.$vux.alert.show({
            title: '提示',
            content: '您输入的价格超出平均值，受限！'
          })
          return false
        }
        // 查询用户持仓信息
        let formuser = new FormData()
        formuser.append('position_goods_id', this.p2pgoodsdata.goods_id)
        formuser.append('position_user_id', this.user.user_id)
        let useryue = await getP2PUserPositions(formuser)
        if (useryue && useryue.code === 200) {
          this.goods_num = useryue.data.position_goods_num
          if (useryue.data.position_goods_num < this.transactionnum) {
            this.$vux.alert.show({
              title: '提示',
              content: '您的可出货单数不足！'
            })
            return false
          }
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: '您的可出货单数不足！'
          })
          return false
        }

        let form = new FormData()
        form.append('record_user_id', this.user.user_id)
        form.append('record_goods_id', this.p2pgoodsdata.goods_id)
        form.append('commission_price', this.transactionparice)
        form.append('commission_num', this.transactionnum)
        let out = await addOutTransactionRecord(form)
        if (out && out.code === 200) {
          // 成功创建委托出货
          this.$vux.alert.show({
            title: '提示',
            content: '成功委托出货！'
          })
          // 退出保本金活动政策
          let form = new FormData()
          form.append('userid', this.user.user_id)
          form.append('goodsid', this.p2pgoodsdata.goods_id)
          let re = await getcapitalbuy(form)
          if (re && re.code === 200) {
            var ff = new FormData()
            ff.append('record_id', re.data.record_id)
            ff.append('record_user_id', re.data.record_user_id)
            ff.append('record_goods_id', re.data.record_goods_id)
            ff.append('record_transaction_num', re.data.record_transaction_num)
            ff.append('record_transaction_means', re.data.record_transaction_means)
            ff.append('commission_price', re.data.commission_price)
            ff.append('final_price', re.data.final_price)
            ff.append('commission_num', re.data.commission_num)
            ff.append('trading_status', re.data.trading_status)
            ff.append('record_time', re.data.record_time)
            ff.append('record_the_term', re.data.record_the_term)
            ff.append('record_mode', re.data.record_mode)
            ff.append('paymentmethod', re.data.paymentmethod)
            ff.append('pay_status', re.data.pay_status)
            ff.append('withdrawal', re.data.withdrawal)
            ff.append('record_sn', re.data.record_sn)
            var up = await updatatransactionrecord(ff)
            if (up) {

            }
          }
        }
      }
      this.loadData()
    },
    // 委托出货
    async outpurchase () {
      var that = this
      let form = new FormData()
      form.append('userid', this.user.user_id)
      form.append('goodsid', this.p2pgoodsdata.goods_id)
      let re = await getcapitalbuy(form)
      if (re && re.code === 200) {
        that.$vux.confirm.show({
          title: '退回本金',
          content: '您当前正在参与保本金活动，自由交易将自动结束保本金活动政策！',
          onConfirm: () => {
            that.purchase()
          }
        })
      } else {
        let res = await prescribedtradinghours()
        if (res && res.code === 200) {
          if (this.transactionparice === 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '请输入交易价格！'
            })
            return false
          }
          if (this.transactionnum === 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '请输入交易数量！'
            })
            return false
          }
          var A = this.openingparice * this.downprice
          var B = this.openingparice * this.upprice
          if (A > this.transactionparice) {
            this.$vux.alert.show({
              title: '提示',
              content: '您输入的价格超出平均值，受限！'
            })
            return false
          }
          if (B < this.transactionparice) {
            this.$vux.alert.show({
              title: '提示',
              content: '您输入的价格超出平均值，受限！'
            })
            return false
          }
          // 查询用户持仓信息
          let formuser = new FormData()
          formuser.append('position_goods_id', this.p2pgoodsdata.goods_id)
          formuser.append('position_user_id', this.user.user_id)
          let useryue = await getP2PUserPositions(formuser)
          if (useryue && useryue.code === 200) {
            this.goods_num = useryue.data.position_goods_num
            if (useryue.data.position_goods_num < this.transactionnum) {
              this.$vux.alert.show({
                title: '提示',
                content: '您的可出货单数不足！'
              })
              return false
            }
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: '您的可出货单数不足！'
            })
            return false
          }

          let form = new FormData()
          form.append('record_user_id', this.user.user_id)
          form.append('record_goods_id', this.p2pgoodsdata.goods_id)
          form.append('commission_price', this.transactionparice)
          form.append('commission_num', this.transactionnum)
          let out = await addOutTransactionRecord(form)
          if (out && out.code === 200) {
            // 成功创建委托出货
            this.$vux.alert.show({
              title: '提示',
              content: '成功委托出货！'
            })
          }
          this.loadData()
        }
      }
    },
    // 加载页面数据
    async loadData () {
      var p2pgoodsid = this.$route.query.id
      let res = await getP2PGoodsDetail(p2pgoodsid)
      if (res.code === 200) {
        this.p2pgoodsdata = res.data
      }
    },
    // 获取开盘价
    async getrealtimeprice () {
      let form = new FormData()
      form.append('goodsid', this.$route.query.id)
      let respt = await getPriceTrend(form)
      if (respt && respt.code === 200 && respt !== null) {
        this.openingparice = respt.data.current_price // 当日交易开盘价
        this.transactionparice = respt.data.current_price // 交易单价
        this.realtimeprice = respt.data.current_price // 当日交易实时价
      } else {
        // this.openingparice = respt.data // 当日交易开盘价
        this.transactionparice = respt.data // 交易单价
        this.realtimeprice = respt.data // 当日交易实时价
      }
      let ressize = await getPriceTrendsize(form)
      if (ressize && ressize.code === 200) {
        this.highestprice = this.accMul(this.openingparice, this.upprice) // ressize.data.maxsize // 当日交易最高价
        this.lowestprice = this.accMul(this.openingparice, this.downprice) // ressize.data.minsize // 当日交易最低价
      }

      // 出货5排
      let out = await getPriceTrendOut(form)
      if (out && out.code === 200) {
        this.inandoutData = out.data
      }
    },
    // 获取实时价
    async getRealTimePricet () {
      let form = new FormData()
      form.append('goodsid', this.$route.query.id)
      let respt = await getRealTimePriceTrend(form)
      if (respt && respt.code === 200) {
        // this.transactionparice = respt.data.current_price
        this.realtimeprice = respt.data.current_price // 当日交易实时价
      }
      let ressize = await getPriceTrendsize(form)
      if (ressize && ressize.code === 200) {
        this.highestprice = this.accMul(this.openingparice, this.upprice) // ressize.data.maxsize // 当日交易最高价
        this.lowestprice = this.accMul(this.openingparice, this.downprice) // ressize.data.minsize // 当日交易最低价
      }
    },
    // 初始化交易浮动比例
    async getTPF () {
      let res = await getTradingPriceFloating()
      if (res && res.code === 200) {
        console.log(res.data)
        this.upprice = res.data.IncreaseRatio
        this.downprice = res.data.DeclineRatio
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      var _this = this
      _this.getrealtimeprice()

      setInterval(this.getRealTimePricet, 1000 * 300)
    })
  },
  created () {
    this.getTPF()
  },
  // watch: {
  //   '$route': function (to, from) {
  //     // 加载页面数据
  //     this.loadData()
  //   }
  // },
  activated () {
    // 加载页面数据
    this.loadData()
  },
  beforeDestroy () {
    // clearInterval(this.timer)
  }
}

</script>
<style lang="scss" scoped>
    #app .p2pgoodsstrend {
        position: relative;

        /deep/ .vux-header {
            background: rgba(0, 0, 0, 0);
            position: absolute;
            width: 100%;

            .vux-header-title {
                color: #fff;
            }

            .vux-header-left .left-arrow:before {
                border-width: .0125rem 0 0 .0125rem;
                border-color: #fff;
            }
        }
    }

    .divtop {
        background: url('http://img.zanjl.com/Content/img/image/huodongyue.png') no-repeat;
        background-size: 100% 100%;
        height: 6.5rem;
        color: #fff;
        position: relative;
    }

    .bottom-row {
        line-height: 0.6rem;
        width: 8.8rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.175rem;
        margin: auto;
        position: absolute;
        left: 50%;
        bottom: -0.8rem;
        transform: translateX(-50%);

        .card-grid-flex {
            display: flex;
            padding: 0.25rem 0;

            div {
                flex: 1;
                text-align: center;
                font-size: 0.4rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                line-height: 0.25rem;
            }

            p {
                font-size: 0.38rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                line-height: 0.25rem;
                padding-top: 0.4rem;
            }

            .vux-1px-r::after {
                border: 0;
            }
        }
    }

    .thcss {
        text-align: left;
        color: #ffcc00;
        padding-left: 0.2rem;

        label {
            text-align: right;
            float: right;
            padding-right: 0.2rem;

            a {
                color: #ffcc00;
            }
        }
    }

    .tdcs {
        text-align: left;
        width: 30%;
        color: #ffffff;
        padding-left: 0.2rem;
    }

    .tdcss {
        text-align: left;
        width: 30%;
        color: #ffffff;
    }

    .lb2 {
        color: #a8a7aa;
        margin-left: 0.2rem;
    }

    .rthcss,
    .cthcss {
        color: #333;
    }

    .rlb1,
    .clb1 {
        color: #333;
        font-size: 0.4rem;
    }

    .rlb2 {
        color: #1eba35;
        font-size: 0.4rem;
    }

    .clb2 {
        color: #ff484f;
        font-size: 0.4rem;
    }

    .cargo {
        padding: 0 0.625rem;

        h2.cargo_title {
            font-size: 0.275rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 0.375rem;
            padding: 0.2875rem 0;
        }

        .cargo_box {
            width: 100%;
            // height: 4.2375rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.175rem;
            padding: 0 1rem;
            text-align: center;

            .cargo_h2_box {
                display: flex;
                justify-content: space-around;
                flex-wrap: nowrap;
                padding: 0.2rem 0;
                margin: 0 0.2rem;
                border-bottom: .0125rem solid #dedede;

                h2 {
                    width: 100%;
                    font-size: 0.38rem;
                    font-family: SourceHanSansSC-Medium;
                    font-weight: 500;
                    color: rgba(102, 102, 102, 1);
                }
            }

            ul {
                li {
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: nowrap;
                    padding: 0.2rem;

                    .flex {
                        width: 100%;
                        font-size: 0.38rem;
                        font-family: SourceHanSansSC-Medium;
                        font-weight: 500;
                        color: rgba(102, 102, 102, 1);
                    }

                    .orange {
                        color: #ff4e00;
                    }
                }
            }
        }

        .text-left {
            text-align: left;
        }

        .text-right {
            text-align: right;
        }
    }

    .spec {
        padding: .2rem 0.625rem 0;

        h2.spec_title {
            font-size: 0.275rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 0.375rem;
            padding: 0.2875rem 0;
        }

        .spec_box {
            width: 100%;
            height: 2.55rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.175rem;
            padding: 0 1rem;
            text-align: center;

            ul {
                padding: 0.2rem 0;

                li {
                    padding: 0.2rem 0;
                    border-bottom: .0125rem solid #dedede;

                    span {
                        font-size: 0.38rem;
                        font-family: Source Han Sans SC;
                        font-weight: 500;
                        color: rgba(51, 51, 51, 1);
                        display: inline-block;
                        vertical-align: middle;
                    }

                    img {
                        display: inline-block;
                        width: 0.7rem;
                        height: 0.7rem;
                        vertical-align: middle;
                        margin: 0 0.5rem;
                    }

                    label {
                        width: 1.575rem;
                        height: 0.5875rem;
                        background: rgba(153, 153, 153, 0.3);
                        display: inline-block;
                        vertical-align: middle;

                        input {
                            width: 100%;
                            height: 100%;
                            font-size: 0.325rem;
                            font-family: Source Han Sans SC;
                            font-weight: 500;
                            color: rgba(0, 0, 0, 1);
                            border: none;
                            background: rgba(0, 0, 0, 0);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .edit_posi_btn {
        width: 100%;
        background: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        padding: 0.25rem 0;
        position: absolute;
        bottom: 0;
        left: 0;

        .posi_btn {
            width: 4rem;
            height: .9rem;
            background: rgba(255, 66, 0, 1);
            border-radius: 0.0625rem;
            font-size: 0.44rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            border: none;
        }
    }

</style>
